<template>
  <div>
    <el-form inline>
      <el-form-item style="margin-top: 20px">
        <el-input v-model="roleNames.roleName" placeholder="角色名称" />
      </el-form-item>

      <el-button type="primary" :icon="Search" @click="search">查询</el-button>
      <el-button @click="resetSearch">清空</el-button>
    </el-form>

    <div style="margin: 20px 0">
      <el-button type="primary" @click="addRole">添加</el-button>
      <el-button type="danger" @click="removeRoles" :disabled="selectedRoles.length === 0">批量删除</el-button>
    </div>

    <el-table border stripe style="width: 960px" v-loading="listLoading" :data="roles" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />

      <el-table-column type="index" label="序号" width="80" align="center"> </el-table-column>

      <el-table-column label="角色名称">
        <template v-slot="{ row }">
          <template v-if="row.edit">
            <el-input v-model="row.roleName" class="edit-input" size="small" />
            <el-button class="cancel-btn" size="small" :icon="Refresh" type="warning" @click="cancelEdit(row)"> 取消 </el-button>
          </template>
          <span v-else>{{ row.roleName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="300" align="center">
        <template v-slot="{ row }">
          <el-button size="small" type="info" :icon="InfoFilled" title="分配权限" @click="$router.push(`/acl/role/auth?id=${row.id}&roleName=${row.roleName}`)" />

          <el-button size="small" type="primary" :icon="Check" title="确定" @click="updateRole(row)" />
          <el-button size="small" type="primary" :icon="Edit" title="修改角色" @click="row.edit = true" />
          <el-button size="small" type="danger" :icon="Delete" title="删除角色" @click="removeRole(row)" />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination :current-page="page" :total="total" :page-size="limit" :page-sizes="[5, 10, 20, 30]" style="padding: 20px 0" layout="prev, pager, next, jumper, ->, sizes, total" @current-change="getRoles" @size-change="getRoles(1, $event)" />
  </div>
</template>

<script lang="ts">
export default {
  name: "Role",
};
</script>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { ElForm, ElFormItem, ElInput, ElButton, ElTable, ElTableColumn, ElPagination, ElMessage, ElMessageBox } from "element-plus";
import { Search, Edit, Delete, Refresh, InfoFilled, Check } from "@element-plus/icons-vue";
import type { RoleListModel, RoleModel } from "@/api/acl/model/roleModel";
import { updateRoleApi, removeRoleApi, getRoleListApi, saveRoleApi, removeRolesApi } from "@/api/acl/role";

const listLoading = ref(false); // 数据是否正在加载
const roles = ref<RoleListModel>([]); // 角色列表
const total = ref(0); // 总记录数
const page = ref(1); // 当前页码
const limit = ref(5); // 每页记录数
const roleNames = reactive({
  // 用户搜索的用户名
  roleName: "",
  searchRoleName: "",
});
const selectedRoles = ref<RoleListModel>([]); // 所有选中的角色列表

onMounted(() => {
  getRoles();
});

/* 
  取消修改
  */
const cancelEdit = (role: RoleModel) => {
  role.roleName = role.originRoleName as string;
  role.edit = false;
  ElMessage.warning("取消角色修改");
};

/* 
  更新角色
  */
const updateRole = (role: RoleModel) => {
  updateRoleApi(role).then(() => {
    ElMessage.success("更新角色成功!");
    getRoles();
  });
};

/* 
  添加角色
  */
const addRole = () => {
  // 显示添加界面
  ElMessageBox.prompt("请输入新名称", "添加角色", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(({ value }) => {
      saveRoleApi({ roleName: value }).then(() => {
        ElMessage.success("添加角色成功");
        getRoles();
      });
    })
    .catch(() => {
      ElMessage.warning("取消添加");
    });
};

/* 
  异步获取角色分页列表
  */
const getRoles = (p = page.value, size = limit.value) => {
  page.value = p;
  limit.value = size;
  listLoading.value = true;
  getRoleListApi(p, size, roleNames.searchRoleName)
    .then((result) => {
      roles.value = result.items.map((item) => {
        item.edit = false; // 用于标识是否显示编辑输入框的属性
        item.originRoleName = item.roleName; // 缓存角色名称, 用于取消
        return item;
      });
      total.value = result.total;
    })
    .finally(() => {
      listLoading.value = false;
    });
};

/* 
  根据搜索条件进行搜索
  */
const search = () => {
  roleNames.searchRoleName = roleNames.roleName;
  getRoles();
};

/* 
  重置查询表单搜索列表
  */
const resetSearch = () => {
  roleNames.roleName = "";
  roleNames.searchRoleName = "";
  getRoles();
};

/* 
  删除指定的角色
  */
const removeRole = (role: RoleModel) => {
  ElMessageBox.confirm(`确定删除 '${role.roleName}' 吗?`, "提示", {
    type: "warning",
  })
    .then(async () => {
      await removeRoleApi(role.id as string);
      getRoles(roles.value.length === 1 ? page.value - 1 : page.value);
      ElMessage.success("删除成功!");
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
};

/* 
  当表格复选框选项发生变化的时候触发
  */
const handleSelectionChange = (selection: RoleListModel) => {
  selectedRoles.value = selection;
};

/* 
  批量删除
  */
const removeRoles = () => {
  ElMessageBox.confirm("此操作将永久删除该记录, 是否继续?", "提示", {
    type: "warning",
  })
    .then(async () => {
      const ids = selectedRoles.value.map((role) => role.id as string);
      await removeRolesApi(ids);
      getRoles();
      ElMessage({
        type: "success",
        message: "批量删除成功!",
      });
    })
    .catch((error) => {
      if (error === "cancel") {
        ElMessage({
          type: "info",
          message: "已取消删除",
        });
      }
    });
};
</script>
